.images {
    width: 100vw;
    display: flex;
    justify-content: space-around;
  }
  .image {
    display: block;
    /* width: 100%; */
    padding-top: 0%;
    background-size: cover;
    position: relative;
    width:  100%; 
    height: 400px;  
    background-size: cover;
    background-position: center;
    background-repeat: repeat;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
    -moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
    box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);

  }

  .image2 {
    display: block;
    /* width: 100%; */
    padding-top: 0%;
    background-size: cover;
    position: relative;
    width:  3rem; 
    height: auto;
    min-height: 170px;  
    background-size: cover;
    background-position: center;
    background-repeat: repeat;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
    -moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
    box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);

  }



  .zoom-in-out-box {
    margin: 5px;
    background: #f50057;
    animation: zoom-in-zoom-out 3.5s cubic-bezier(0.6, 0, 0.4, 1) both infinite;
    transform-style: preserve-3d;
  }

  /* div.zoom-in-out-box:hover {
    margin: 5x;
    background: #f50057;
    animation: zoom-in-zoom-out 4s  both ;
    transform-style: preserve-3d;
  } */
  
  @keyframes zoom-in-zoom-out {
    0% {

      background-size: contain;
    }
   
    40% {
        
        background-size: contain;
     
      }

      50% {
    
        background-size: cover;

    
      }
   100% {
    
      background-size: cover;

  
    }
  }


  .image > a {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  




.imageBen {
    
    /* width: 100%; */
    padding-top: 0%;
    max-height: 400px;
    position: relative;
    width:2.5rem!important;
    min-width: 310px;
    margin: auto;
    height: auto !important;
    display: flex;
    justify-content: space-around !important;
    align-items: center !important;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
    -moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
    box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);

  }


  .imageBen1 {
    
    /* width: 100%; */
    padding-top: 0%;
    max-height: 400px;
    position: relative;
    width:3rem!important;
    min-width: 310px;
    margin: auto;
    height: auto !important;
    display: flex;
    justify-content: space-around !important;
    align-items: center !important;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
    -moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
    box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);

  }


*:before,
*:after {
  box-sizing: border-box;
  position: relative;
}

.container11 {
  perspective: 1200px;
  

  animation: cinematic-camera 11s cubic-bezier(0.6, 0, 0.4, 1) both infinite;
  @keyframes cinematic-camera {
    from {
      perspective-origin: 60% 40%;
    }
    to {
      perspective-origin: 40% 60%;
    }
    /* 
      Move the fading to the containing element as to not break inside 3D transforms. 
      See: https://css-tricks.com/things-watch-working-css-3d/
    */
    from,
    to {
      opacity: 0;
    }
    25%,
    75% {
      opacity: 1;
    }
  }

  &:after {
    content: "";
    background: linear-gradient(to bottom, #000, #0000 20%, #0000 80%, #000);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
  }
}

main {
  transform-origin: top center;
  transform-style: preserve-3d;

  animation: inherit;
  animation-name: cinematic;

  // Fixed the 3D image transform.
  > img {
    display: block;
    transform-style: preserve-3d;
    animation: inherit;
    animation-name: image-pop;
    @keyframes image-pop {
      70%,
      100% {
        transform: translate3d(0, 0, 60px);
      }
    }

    &:last-of-type {
      animation-delay: 4s;
    }
  }

  @keyframes cinematic {
    from {
      transform: translateZ(-200px) rotateY(30deg) translateY(50vh);
    }
    to {
      transform: translateZ(-100px) rotateY(-30deg) translateY(-100%)
        translateY(50vh);
    }
  }
}